﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="~/lib/axios/dist/axios.js"></script>
    <title>欢迎使用 Bette 伯乐人力资源管理系统</title>
</head>
<div id="app">
    <div class="common-layout" style="font-family: 'Microsoft YaHei';">
        <el-container>
            <el-header class="head" style="font-family: 'Microsoft YaHei';">
                <el-row :gutter="20" style="display: flex; align-items: center; justify-content: center;">
                    <el-col :span="4"></el-col>
                    <el-col :span="16" class="container" style="font-family: 'Microsoft YaHei'; font-size: 36px; color: white; text-align: center;text-shadow: 4px 4px 15px black;">人力资源管理系统</el-col>
                    <el-col :span="4" class="container" style="padding-top: 20px;font-family: 'Microsoft YaHei'; display: flex; align-items: center; justify-content: space-between;font-size:18px">
                        <div>欢迎您：{{name}}({{RolesName}})</div>
                        <el-button plain v-on:click="Quit" style="height:20px;width:60px;font-size:12px">
                            退出系统
                        </el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside class="menu_aside">
                    <el-scrollbar class="myscrollbar">
                        <el-menu background-color="#FFFFCC" class="el-menu-vertical-demo" default-active="2" text-color="black">
                            <!--一级菜单 -->
                            <template v-for="(item, index) in menuItems" :key="item.juriID">
                                <el-sub-menu :index="item.jurAddress">
                                    <template #title>
                                        <span>{{ item.jurName }}</span>
                                    </template>
                                    <!-- 二级菜单 -->
                                    <template v-for="(childItem, childIndex) in item.children" :key="childItem.juriID">
                                        <el-sub-menu v-if="childItem.children && childItem.children.length" :index="childItem.jurAddress">
                                            <template #title>
                                                <span>{{ childItem.jurName }}</span>
                                            </template>
                                            <!-- 三级菜单 -->
                                            <template v-for="(grandChildItem, grandChildIndex) in childItem.children" :key="grandChildItem.juriID">
                                                <el-menu-item :index="grandChildItem.jurAddress" v-on:click="setSelectedView(grandChildItem.jurAddress)">
                                                    <span>{{ grandChildItem.jurName }}</span>
                                                </el-menu-item>
                                            </template>
                                        </el-sub-menu>
                                        <!-- 如果二级菜单没有子菜单，则直接显示为菜单项 -->
                                        <el-menu-item v-else :index="childItem.jurAddress" v-on:click="setSelectedView(childItem.jurAddress)">
                                            <span>{{ childItem.jurName }}</span>
                                        </el-menu-item>
                                    </template>
                                </el-sub-menu>
                            </template>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-main class="custom-main" width="100%" height="100%" style="overflow-y: auto">
                    <iframe :src="iframeView" style="width:100%;height:100%" frameborder="0"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            let menuItems = reactive([]);
            const name = ref("");
            const Uid = ref("");
            const RolesName = ref("")
            const Rid = ref("")
            const iframeView = ref("/Home/bj"); // 设置 iframe 的默认 src

            const Quit = () => {
                location.replace("/Login/Index");
            };

            const setSelectedView = (viewPath) => {
                iframeView.value = viewPath;
            };

            const fetchData = () => {
                // 设置 axios 默认 Headers
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";


                // 获取存储的res.data值
                const responseDataString = sessionStorage.getItem('User');
                if (responseDataString) {

                    // 将存储的字符串转换回数组
                    const responseDataArray = JSON.parse(responseDataString);
                    // 现在您可以访问responseDataArray数组中的元素
                    name.value = responseDataArray.uName;
                    Uid.value = responseDataArray.uId;
                    axios.post('/GetRolesById', {
                        uid: Uid.value
                    }).then(function (response) {
                        RolesName.value = response.data.rolesName
                        Rid.value = response.data.rolesID;
                        sessionStorage.setItem('uid', response.data.rolesName);
                        open();
                        // 第一个 POST 请求
                        axios.post('/GetMenu1', {
                            rid: Rid.value
                        }).then(res => {
                            menuItems.splice(0, menuItems.length, ...res.data);
                        })
                    })


                } else {
                    console.log("未找到存储的值");
                }

            };
            function open() {
                ElementPlus.ElNotification({
                    title: '消息提示',
                    type: 'info',
                    dangerouslyUseHTMLString: true,
                    message: '<hr/>欢迎你：<strong>' + RolesName.value + '</strong> ' + name.value,
                    position: 'bottom-right'
                })
            }
            function hasGrandChildren(children) {
                for (let child of children) {
                    if (child.children && child.children.length > 0) {
                        return true;
                    }
                }
                return false;
            }
            fetchData();
            return {
                Quit,
                name,
                Uid,
                setSelectedView,
                iframeView,
                RolesName,
                menuItems,
                hasGrandChildren
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>

<style>
    .common-layout {
        display: flex;
        flex-direction: column;
        height: 98vh;
    }

    .head {
        height: 70px;
        background-color: #FFD553;
        background-size: cover;
    }

    .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-main {
        padding: 0px;
    }

    .menu_aside {
    }

    .custom-main {
        height: calc(98vh - 70px);
    }

    .menu_aside {
        background-color: #545c64;
        height: calc(98vh - 70px);
        background-color: #FFFFCC;
    }

    .your-container {
        position: relative;
    }

    /*    .image-in-right-corner {
        position: absolute;
        top: -20px;
        right: -20px;
    }*/
    * {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
</style>
